<!--
类名样式操作：
    element.className = [CSS 类名];

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .light{
            background-color: aqua;
            color: black;
            width: 100%;
            height: 100%;
        }
        body,html{
            width: 100%;
            height: 100%;
        }

        .dark{
            background-color: black;
            color: white;
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
    <!-- 点击div中的话，则就之间切换 白天/黑夜模式 -->
    <div class="light">
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
        这是一段话<br>
    </div>
</body>

<script>
    let div=document.querySelector(".light");
    div.onclick=function(){
        // 如果当前是白天模式，则就将模式调整为黑夜模式
        // 如果当前是黑夜模式，则就将模式调整为白天模式

        console.log(div.className); // 打印类名
        if(div.className == "light"){
            div.className="dark";
        }
        else{
            div.className="light";
        }
    }
</script>
</html>